import React from 'react'
import { Image, Text, View } from '@tarojs/components'
import i18n from '@I18N'
import { isAndroid } from '@UTILS/common'
import style from './TodayCard.module.scss'

interface Props {
  title: string,
  containerClass?: string,
  onClickBtn?: () => void,
  icon: string
}
const IsAndroid = isAndroid()

const TodayCard: React.FC<Props> = ({ title, containerClass, children, onClickBtn, icon }) => (
  <View className={`${style.container} ${containerClass}`}>
    <View className={style.titleContainer}>
      <Image src={icon} className={style.icon} />
      <Text className={`${style.title} ${IsAndroid && style.normal}`}>{title}</Text>
      {onClickBtn && (
        <View className={style.btnContainer} onClick={onClickBtn}>
          <Text className={style.btnText}>
            {`+${i18n.common.add()}`}
          </Text>
        </View>
      )}
    </View>
    {children}
  </View>
)

export default TodayCard
